<html>
<head>
    <title>用户数据</title>
    <script type="text/javascript" src="${rootRef}/js/jquery-1.6.2.js"></script>
    <script type="text/javascript" src="${rootRef}/js/ydtxl.js"></script>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>

<div>欢迎：${accountName}</div>
<div id="add_group_result"></div>
<div>
    <form>
        <table>
            <tbody>
            <tr>
                <td>组名:</td>
                <td>
                    <input id="title" name="title" type="text">
                </td>
            </tr>
            <tr>
                <td colspan="2"><input id="save" type="button" value="Save" onclick="addGroup();"></td>
            </tr>

            </tbody>
        </table>
    </form>
</div>
<div id="result"></div>
<div style="margin-top: 10px;">
    <h4>联系人分组列表</h4>
    <table width="100%">
        <tr>
            <th width="70%">组名</th>
            <th width="20%">备注</th>
            <th width="10%">账号</th>
        </tr>
        <#list groupList as group>
            <tr>
                <td>${group.title}</a></td>
                <td>${group.notes}</td>
                <td>${group.accountName}</td>
            </tr>
        </#list>
        <tr>
            <td colspan="2"><input id="groupList" type="button" value="get group list" onclick="getGroupList();"></td>
        </tr>
    </table>
</div>
</body>
<script type="text/javascript">
    function addGroup() {
        $("#add_group_result").accept("/${accountName}/group", {accountName:$("#accountName").val(),title:$("#title").val()});
    }
    function getGroupList() {
        $("#result").retrieve("/${accountName}/groups");
    }
</script>
</html>